<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
	.postItem {
		background-color: #fff;
		padding: 0 0.5rem 0.5rem;
		margin-bottom: 0.25rem;
	}
	.authorInfo {
		height: 3.4rem;
	}
	.authorInfo .name {
		padding: 0 0.5rem;
		font-size: 0.7rem;
		color: #000;
	}
	.authorInfo .shareBtn {
		width: 1.5rem;
		height: 2rem;
		background: url(../image/common/38.png) no-repeat center center;
		background-size: 0.8rem;
	}
	.postDate {
		text-align: right;
		font-size: 0.5rem;
		color: #adadad;
		padding: 0.25rem 0;
	}
	.postInfo {
		padding: 0.25rem 0;
	}
	.postInfo img {
		margin-right: 0.25rem;
		height: 0.75rem;
	}
	.postInfo .num {
		margin-right: 1rem;
		font-size: 0.55rem;
		color: #666;
		line-height: 0.75rem;
	}
	.postInfo .shopIco {
		width: 1rem;
		height: 1rem;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: auto 0.75rem;
		background-image: url(../image/post/02.png);
		margin-left: auto;
	}
	.postInfo .shopIco.on{
		background-image: url(../image/post/0.png);
	}
	.postItem .detail {
		margin: 0.25rem 0 0.5rem;
		position: relative;
		font-size: 14px;
		line-height: 20px;
		color: #333;
		padding-bottom: 20px;
	}
	.postItem .detail.ellipsis {

		padding-bottom: 0;
		max-height: 60px;
		overflow: hidden;

		/* display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		word-break: break-all;
		white-space: normal !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical; */
	}
	.postItem .detail .detailText {
		display: inline-block;
	}
	.togDetailBtn {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 14px;
		line-height: 20px;
		color: #333;
		display: inline-block;
		width: 6em;
		text-align: right;
		background: linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%);
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%);
	}
	.togDetailBtn:after {
		content: "展开";
	}
	.togDetailBtn.on:after {
		content: "收起";
	}
	
	.postItem .evaBox {
		position: relative;
		margin-bottom: 0.5rem;
		background: #F7F8F8;
		border-radius: 0.2rem;
		padding: 0.5rem;
		color: #333;
		font-size: 0.6rem;
	}
	.postItem .evaBox > div {
		margin-top: 0.25rem;
	}
	.postItem .evaBox > div:first-child {
		margin-top: 0;
	}
	.postItem .evaBox .replyName {
		margin-right: 0.25rem;
		color: #010101;
	}
	.postItem .evaBox:before {
		content: "";
		position: absolute;
		left: 0.75rem;
		bottom: 100%;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid #F7F8F8;
	}
	.postItem .addEva {
		height: 1.6rem;
		font-size: 0.7rem;
		color: #adadad;
	}
	.postItem .addEva img {
		height: 0.65rem;
	}
	.relateBox {
		margin: 0 -0.5rem;
		height: 0;
		overflow: hidden;
	}
	.relateBox.show {
		height: auto;
	}
	.relateBox .swiper-container {
		padding: 0.25rem 0 0.5rem;
	}
	.relateBox .swiper-slide {
		width: 14rem;
		border-radius: 0.25rem;
		padding: 0.4rem;
		box-shadow: 0 0 5px rgba(0,0,0,0.1);
	}
	.relateBox .relatePic {
		width: 3.6rem;
		height: 3.6rem;
		border-radius: 0.25rem;
	}
	.relateBox .relateText {
		height: 3.6rem;
		padding: 0.25rem 0 0.25rem 0.5rem;
	}
	.relateBox .relateTtl {
		font-size: 0.6rem;
	}
	.relateBox .price {
		margin-right: 0.25rem;
	}
	.relateBox .comQuan {
		transform: scale(0.7);
	}
	.relateBox .earn {
		margin-right: -0.4rem;
		font-size: 0.4rem;
		color: #FFF;
		line-height: 0.7rem;
		background: #E73350;
		padding: 0 0.2rem 0 0.4rem;
		border-radius: 0.35rem 0 0 0.35rem;
	}
	.tuijian {
		min-height: 100vh;
		background: #FFF;
	}
	.tuijian .ttl {
		font-size: 0.6rem;
		color: #adadad;
		line-height: 1.4rem;
		padding: 0 1rem;
		background: #f5f5f5;
	}
	.tuijian .followList {
		background: #FFF;
		padding: 0 0.5rem;
	}
	.tuijian .followList li {
		height: 3.5rem;
	}
	.tuijian .followList .name {
		padding: 0 0.5rem;
	}

	.postItem .photo {
		height: 12.5rem;
		position: relative;
		overflow: hidden;
	}
</style>
</head>

<body class="bg-f5">
<div id="app">
	<div class="tuijian" v-if="recommendFocus.length && !dataList.length">
		<div class="ttl">根据你的兴趣为你推荐</div>
		<ul class="followList">
			<li class="aui-border-b aui-flex-col aui-flex-middle" v-for="(it,i) in recommendFocus">
				<div><div class="avatar"><img :src="it.user_avatar" alt=""></div></div>
				<div class="name flex-auto aui-ellipsis-1" v-text="it.user_nickname"></div>
				<div class="comFollowBtn" :class="{'on': it.is_attention == 1 }" v-tap="[follow,it]"></div>
			</li>
		</ul>
	</div>
	<div class="list" v-if="dataList.length">
		<div class="postItem" v-for="(it,i) in dataList">
			<div class="authorInfo aui-flex-col aui-flex-middle">
				<div><div class="avatar"><img :src="it.user_avatar" alt=""></div></div>
				<div class="name aui-ellipsis-1 flex-auto" v-text="it.user_nickname"></div>
				<!-- <div class="shareBtn" tapmode onClick="openShare();"></div> -->
			</div>
			<div class="photo bgCover" v-tap="[openDetail,it.article_id]" :style="{ 'background-image' : 'url('+ it.article_cover +')'}"></div>
			<div class="postDate" v-text="Date.parse(it.article_addtime).toString('MM-dd')"></div>
			<div class="postInfo aui-flex-col aui-flex-middle">
				<div class="aui-flex-col aui-flex-middle" v-tap="[postLike,it]">
					<div>
						<img src="../image/common/21.png" v-if="it.is_like == -1" alt="">
						<img src="../image/common/22.png" v-if="it.is_like == 1" alt="">
					</div>
					<div class="num" v-text="getLikeNumStr(it.like_count)"></div>
				</div>
				<div class="aui-flex-col aui-flex-middle" v-tap="[postComment,it]">
					<div><img src="../image/post/07.png" alt=""></div>
					<div class="num" v-text="getLikeNumStr(it.article_comment_count)"></div>
				</div>
				<div class="aui-flex-col aui-flex-middle" v-tap="[postCollect,it]">
					<div>
						<img src="../image/post/05.png" v-if="it.is_collected == -1" alt="">
						<img src="../image/post/04.png" v-if="it.is_collected == 1" alt="">
					</div>
					<div class="num" v-text="getLikeNumStr(it.article_collect_count)"></div>
				</div>
				<div v-tap="[dashang,it]"><img src="../image/post/10.png" alt=""></div>
				<div class="shopIco" v-if="it.goods.length" tapmode onClick="togRelate(this);"></div>
			</div>
			<div class="relateBox" v-if="it.goods.length">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="god in it.goods" :data-id="god.shop_id" tapmode onClick="openProduct(this);">
							<div class="relateItem aui-flex-col aui-flex-middle">
								<div class="relatePic bgCover" :style="{ 'background-image' : 'url('+ god.pict_url +')'}"></div>
								<div class="relateText flex-auto aui-flex-row aui-flex-between">
									<div class="relateTtl aui-ellipsis-2" v-text="god.title"></div>
									<div class="aui-flex-col aui-flex-middle">
										<div class="font-helvet price">¥{{ god.coupon_amount }}</div>
										<dl class="comQuan outline aui-flex-col aui-flex-middle" v-if="god.coupon_info">
											<dt>券</dt>
											<dd>{{god.coupon_info}}元</dd>
										</dl>
										<div class="flex-auto"></div>
										<div class="earn" v-if="god.data_amount && getUserVip()>1 ">赚￥{{god.data_amount}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="detail ellipsis">
				<span class="detailText" v-html="line2br(it.article_content)"></span>
				<span class="togDetailBtn" tapmode onClick="togDetail(this);"></span>
			</div>
			<div class="evaBox" v-if="it.comment.length">
				<div v-for="(comment,commentIndex) in it.comment" v-if="commentIndex < 3"><span class="replyName">{{comment.user_nickname}}:</span>{{comment.comment_content}}</div>
			</div>
			<div class="addEva aui-flex-col aui-flex-middle" v-tap="[postComment,it]">
				<div><img src="../image/post/08.png" alt=""></div>
				<div class="aui-px-10">添加评论...</div>
			</div>
		</div>
		
	</div>
</div>
</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/dom7.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/vue-tap.js"></script>
<script type="text/javascript" src="../script/date.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript">
var vm;
var vuedata = {
	isLoading: false,
	userId: '',
	postData: {
		userid: '',
		pageNo: 1,
		pageSize: 20
	},
	recommendFocus: [],
	dataList: []
};
vm = new Vue({
	el: '#app',
	data: vuedata,
	methods: {
		//打开详情页
		openDetail: function(id){
			openPostDetail(id);
		},
		//关注
		follow: function(it){
			api.ajax({
				url: BASE_URL + 'App/Article/userFollow',
				method: 'post',
				data: {
					values: {
						userid: vuedata.userId,
						concerned_userid: it.userid
					}
				}
			},function(ret,err){
				if (ret && ret.code == 1) {
					if(ret.msg == '取消成功'){
						it.is_attention = -1;
					}else{
						it.is_attention = 1;
					}
					toast(ret.msg);
				} else {
					toast('操作失败');
				};
			});
		},
		//喜欢
		postLike: function(it){
			api.ajax({
				url: BASE_URL + 'App/Article/articleLike',
				method: 'post',
				data: {
					values: {
						userid: vuedata.userId,
						article_id: it.article_id,
						article_userid: it.article_userid
					}
				}
			},function(ret,err){
				if (ret && ret.code == 1) {
					if(ret.msg == '取消成功'){
						it.is_like = -1;
						it.like_count--;
					}else{
						it.is_like = 1;
						it.like_count++;
					}
					toast(ret.msg);
				} else {
					toast('操作失败');
				};
			});
		},
		//打开评论
		postComment: function(it){
			api.openWin({
				name: 'post_eva_list_win',
				url: 'post/post_eva_list_win.html',
				pageParam: {
					article_id: it.article_id
				}
			});
		},
		//收藏
		postCollect: function(it){
			api.ajax({
				url: BASE_URL + 'App/Article/articleCollect',
				method: 'post',
				data: {
					values: {
						userid: vuedata.userId,
						article_id: it.article_id
					}
				}
			},function(ret,err){
				if (ret && ret.code == 1) {
					if(ret.msg == '取消成功'){
						it.is_collected = -1;
						it.article_collect_count--;
					}else{
						it.is_collected = 1;
						it.article_collect_count++;
					}
					toast(ret.msg);
				} else {
					toast('操作失败');
				};
			});
		},
		//打赏积分
		dashang: function(it){
			api.openWin({
				name: 'yo_money_win',
				url: 'post/yo_money_win.html',
				pageParam: {
					postInfo: it
				}
			});
		},

	}
});

apiready = function() {
	api.parseTapmode();
	vuedata.userId = getUserId();
	vuedata.postData.userid = getUserId();
	getData();

	// 监听到达底部
	api.addEventListener({
	  name:'scrolltobottom',
	  extra:{
		  threshold: 50
	  }
	}, function(ret, err){
		getData();
	});

	//监听点赞
	api.addEventListener({
		name: 'postLikeEvent'
	}, function(ret, err){
		if(ret.value.id){
			for( var i=0;i<vuedata.dataList.length;i++ ){
				if(vuedata.dataList[i].article_id == ret.value.id){
					vuedata.dataList[i].is_like = ret.value.is_like;
					vuedata.dataList[i].like_count = ret.value.like_count;
				}
			}
		}
	});

	//下拉刷新
	api.setCustomRefreshHeaderInfo({
		bgColor: '#f5f5f5',
		isScale: false,
		loadAnimInterval: 200,
		image: refreshHeader_img
	}, function(ret) {
		vuedata.postData.pageNo = 1;
		getData();
	});
	
};
//获取文章列表
function getData(){
	if(vuedata.isLoading){
		return;
	}
	api.ajax({
		url: BASE_URL + 'App/Article/concernedArticles',
		method: 'post',
		data: {
			values: vuedata.postData
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			if( ret.data.length ){
				if(vuedata.postData.pageNo == 1){
					vuedata.dataList = [];
				}
				vuedata.dataList = vuedata.dataList.concat(ret.data);
				
				setTimeout(function(){
					checkTog();
					relateSliderInit();
				},100);
				vuedata.postData.pageNo++;
			}
		}else if(vuedata.postData.pageNo == 1){
				getRecommend();
			}
		api.refreshHeaderLoadDone();
	});
}
//获取推荐关注人
function getRecommend(){
	api.ajax({
		url: BASE_URL + 'App/Article/recommendFocus',
		method: 'post',
		data: {
			values: {
				userid: vuedata.userId
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1 && ret.data.length) {
			vuedata.recommendFocus = ret.data;
		}
	});
}
	//相关商品滑动
	function relateSliderInit(){
		new Swiper('.relateBox .swiper-container',{
			speed: 600,
			slidesPerView :'auto',
			spaceBetween : 10,
			slidesOffsetBefore : 10,
			slidesOffsetAfter : 10
		})
	}
	//相关商品的展开 收起
	function togRelate(el){
		var _this = $$(el);
		var item = _this.parents('.postItem');
		_this.toggleClass('on');
		item.find('.relateBox').toggleClass('show');
	}
	//跳转到相关商品
	function openProduct(){
		api.openWin({
			name: 'product_detail_win',
			url: 'best/product_detail_win.html'
		});
	}
	//分享
	function openShare(){
		api.openFrame({
			name: 'share_btm_mask',
			url: 'widget://html/share_btm_mask.html',
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: 'auto'
			},
			bounces: false,
			animation: {
				type: 'fade',
				duration:300
			},
			pageParam: {
				wname: api.winName,
				fname: api.frameName
			}
		});
	}
	//详情 展开 收起
	function togDetail(el){
		var _this = $$(el);
		var detail = _this.parent('.detail');
		_this.toggleClass('on');
		detail.toggleClass('ellipsis');
	}
	//是否需要 展开 收起
	function checkTog(){
		$$('.postItem .detail').each(function(){
			var _this = $$(this);
			var height = _this.find('.detailText').height();
			if(height < 70){
				_this.removeClass('ellipsis').addClass('aui-padded-b-0');
				_this.find('.togDetailBtn').addClass('aui-hide');
			}
		});
	}
</script>
</html>
